<template>
  <div class="app-container">
  <div class="filter-container">
      
        <el-button type="primary" :disabled="enableProcesscyle" @click="processCycleClick()" style="margin-left:0px;">处理周期</el-button>
        <el-input clearable v-model="search.number" placeholder="维修工单" style="width: 170px;margin-left:10px;"></el-input>
        <el-input clearable v-model="search.number" placeholder="车牌号码" style="width: 170px;margin-left:10px;"></el-input>
        
        <el-date-picker v-model="search.daterange" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
        </el-date-picker>

        <el-button type="primary" icon="el-icon-search" @click="searchClick()" style="margin-left:10px;">查询</el-button>
    </div>
    <el-table v-loading="listLoading" :data="list" 
      border fit highlight-current-row stripe 
      @selection-change="handleSelectionChange"
      style="width: 100%">
      <el-table-column type="selection" align="center" width="55">
      </el-table-column>
      <el-table-column align="center" label="序" width="80">
        <template slot-scope="scope">
          <span>{{ scope.row._id }}</span>
        </template>
      </el-table-column>
      
     <el-table-column  min-width="100" align="center" label="维修单号">
        <template slot-scope="scope">
          <span>{{ scope.row.fixnumber }}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="100" align="center" label="进厂时间">
        <template slot-scope="scope">
          <span>{{ scope.row.fixdate }}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="100" align="center" label="车牌号码">
        <template slot-scope="scope">
          <span>{{ scope.row.licenseplate }}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="100" align="center" label="具体车型">
        <template slot-scope="scope">
          <span>{{ scope.row.carname }}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="100" align="center" label="出厂日期">
        <template slot-scope="scope">
          <span>{{ scope.row.completedate }}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="100" align="center" label="制单人">
        <template slot-scope="scope">
          <span>{{ scope.row.guider }}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="100" align="center" label="应收总计">
        <template slot-scope="scope">
          <span>{{ scope.row.totalmoney }}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="100" align="center" label="索赔申请金额">
        <template slot-scope="scope">
          <span>{{ scope.row.applymoney }}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="100" align="center" label="判定金额">
        <template slot-scope="scope">
          <span>{{ scope.row.determinemoney }}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="100" align="center" label="实收金额">
        <template slot-scope="scope">
          <span>{{ scope.row.actualmoney }}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="100" align="center" label="处理周期">
        <template slot-scope="scope">
          <span>{{ scope.row.processcycle }}</span>
        </template>
      </el-table-column>
      
      <el-table-column  min-width="100" align="center" label="状态">
        <template slot-scope="scope">
          <span>{{ scope.row.state | parseClaimdamageState }}</span>
        </template>
      </el-table-column>
      
      <el-table-column  min-width="100" align="center" label="日期">
        <template slot-scope="scope">
          <span>{{ scope.row.createtime | parseTime('{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      
      <el-table-column align="center" label="操作"  width="280" fixed="right">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="rowProcessCycleClick(scope.row.id)">处理周期</el-button>
          <el-button type="primary" size="small" @click="rowAdjustClick(scope.row.id)">差额调整</el-button>
          
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.rows" @pagination="fetchData" />

<!-- 处理周期 -->
<el-dialog :title="dialogCycle.title" :visible.sync="dialogCycle.visible"  width="900px">
    <div class="ci">
        <div class="item" v-show="dialogCycle.data.ids.length>1">
           <span class="name"></span>
            <span class="value">
                当前共选择了 {{dialogCycle.data.ids.length}} 条数据
            </span>
        </div>
        <div class="item" v-show="dialogCycle.data.ids.length==1">
           <span class="name">车牌号码：</span>
            <span class="value">
                {{dialogCycle.data.licenseplate}}
            </span>
        </div>
        <div class="item">
            <span class="name">厂家处理周期：</span>
            <span class="value">
                <el-date-picker v-model="dialogCycle.processcycle" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                </el-date-picker>
            </span>
        </div>
    </div>
    <div slot="footer" class="dialog-footer">
        <el-button   @click="dialogCycle.visible = false">关 闭</el-button>
        <el-button  type="primary" @click="dialogCycle.visible = false">保 存</el-button>
    </div>
</el-dialog>
<!-- end 处理周期 -->


<!-- 差额调整 -->
<el-dialog :title="dialogAdjust.title" :visible.sync="dialogAdjust.visible"  width="900px">
    <div class="ci">
        <div class="item">
           <span class="name">车牌号码：</span>
            <span class="value">
                {{dialogAdjust.data.licenseplate}}
            </span>
        </div>
        <div class="item">
            <span class="name">应收总计：</span>
            <span class="value">
                {{dialogAdjust.data.totalmoney}}
            </span>
        </div>
        <div class="item">
            <span class="name">结算已收：</span>
            <span class="value">
                {{dialogAdjust.data.actualmoney}}
            </span>
        </div>
        <div class="item">
            <span class="name">索赔申请金额：</span>
            <span class="value">
                {{dialogAdjust.data.applymoney}}
            </span>
        </div>
        <div class="item">
            <span class="name required">厂家判定金额：</span>
            <span class="value">
                <el-input clearable v-model="dialogAdjust.data.determinemoney" placeholder="" style="width: 220px;"></el-input>
            </span>
        </div>
    </div>
    <div slot="footer" class="dialog-footer">
        <el-button   @click="dialogAdjust.visible = false">关 闭</el-button>
        <el-button  type="primary" @click="dialogAdjust.visible = false">保 存</el-button>
    </div>
</el-dialog>
<!-- end 差额调整 -->


  </div>
</template>

<script>
import * as claimdemageApi from '@/api/aftersale/claimdemage'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import * as enumHelper from '@/utils/enum'

export default {
    components: { Pagination },
    data(){
        return{
            enableProcesscyle:true,
            search:{ 
                number:'',
                customer:'',
                phone:'',
                daterange:'',
            },
            listQuery: {
                    page: 1,
                    rows: 20,
                    name:'',
                    phone:'',
                    state:-1,
            },
            list:null,
            listLoading:false,
            total:0,
            selectOptions:{
                takers:[]
            },

            dialogCycle:{
                visible:false,
                saveloading:false,
                title:'处理周期',
                data:{
                    ids:'',
                    licenseplate:'',
                    processcycle:'',
                }
            },
            dialogAdjust:{
                visible:false,
                saveloading:false,
                title:'差额调整',
                data:{
                    id:'',
                    licenseplate:'',
                    processcycle:'',
                    determinemoney:'',
                    totalmoney:'',
                    actualmoney:'',
                    applymoney:'',
                }
            }
        }
    },
    created(){
        var that=this;
        //初始化下拉菜单
        //enumHelper.initOptions(that.selectOptions.salesState,enumHelper.presale.salesState);
        that.fetchData();
    },
    filters:{
      parseFixType(val){
        return enumHelper.aftersale.fixType.getName(val);
      },
      parseFixCategory(val){
        return enumHelper.aftersale.fixCategory.getName(val);
      },
      parseClaimdamageState(val){
        return enumHelper.aftersale.claimdamageState.getName(val);
      }

    },
    methods:{
        fetchData(){
          var that=this;
            claimdemageApi.getClaimDemageList({}).then(res=>{
              if(res.data){
                that.list=[...res.data.items.map((item,index)=>{
                  item._id=index+1;
                  return item;
                })];
                that.total=res.data.total;
              }
            })
        },
        refreshClick(){
          this.fetchData();
        },
        
       
        rowProcessCycleClick(id){
            var that=this;
            var selectItem=that.list.filter(o=>o.id==id)[0];
            that.dialogCycle.visible=true;
            that.dialogCycle.data.ids=[id];
            that.dialogCycle.data.licenseplate=selectItem.licenseplate;
        },
        rowAdjustClick(id){
            var that=this;
            var selectItem=that.list.filter(o=>o.id==id)[0];
            that.dialogAdjust.visible=true;
            that.dialogAdjust.data.id=id;
            that.dialogAdjust.data.licenseplate=selectItem.licenseplate;
            that.dialogAdjust.data.totalmoney=selectItem.totalmoney;
            that.dialogAdjust.data.actualmoney=selectItem.actualmoney;
            that.dialogAdjust.data.applymoney=selectItem.applymoney;
            that.dialogAdjust.data.determinemoney=selectItem.determinemoney;
        },
        processCycleClick(){
            var that=this;
            that.dialogCycle.visible=true;
        },
        handleSelectionChange(val){
            var that=this;
            that.enableProcesscyle=val.length==0;
            that.dialogCycle.data.ids=val.map(o=>o.id);
        }

    }
}
</script>

<style>

</style>